import React from 'react';
import { Layout, Button, Dropdown, Avatar, Space, Badge, theme, Modal } from 'antd';
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  UserOutlined,
  SettingOutlined,
  LogoutOutlined,
  FullscreenOutlined,
} from '@ant-design/icons';
import type { MenuProps } from 'antd';
import { useTheme } from '../../contexts/ThemeContext';
import { useAuth } from '../../contexts/AuthContext';
import { useUniversalNotification } from '../../contexts/UniversalNotificationContext';
import ThemeSelector from '../../components/ThemeSelector';
import DynamicIslandNotification from '../../components/DynamicIslandNotification';

const { Header: AntHeader } = Layout;

interface HeaderProps {
  collapsed: boolean;
  onToggle: () => void;
  style?: React.CSSProperties;
}

const Header: React.FC<HeaderProps> = ({ collapsed, onToggle, style }) => {
  const {
    token: { colorBgContainer, colorText, colorTextSecondary, colorTextTertiary },
  } = theme.useToken();
  const { isDark, currentTheme } = useTheme();
  const { state, logout } = useAuth();
  const { remove: removeNotification } = useUniversalNotification();

  /**
   * 获取Modal的主题样式类名
   */
  const getModalClassName = () => {
    if (isDark) {
      return 'dark-modal';
    }

    // 根据当前主题返回对应的样式类
    switch (currentTheme.name) {
      case 'tech':
        return 'tech-theme';
      case 'purple':
        return 'purple-theme';
      case 'green':
        return 'green-theme';
      default:
        return 'light-modal';
    }
  };

  // 用户下拉菜单
  const userMenuItems: MenuProps['items'] = [
    {
      key: 'profile',
      icon: <UserOutlined />,
      label: '个人中心',
    },
    {
      key: 'settings',
      icon: <SettingOutlined />,
      label: '个人设置',
    },
    {
      type: 'divider',
    },
    {
      key: 'logout',
      icon: <LogoutOutlined />,
      label: '退出登录',
      danger: true,
    },
  ];



  const handleUserMenuClick: MenuProps['onClick'] = ({ key }) => {
    switch (key) {
      case 'profile':
        console.log('跳转到个人中心');
        break;
      case 'settings':
        console.log('跳转到个人设置');
        break;
      case 'logout':
        Modal.confirm({
          title: '确认退出',
          content: '您确定要退出登录吗？',
          okText: '确定',
          cancelText: '取消',
          okType: 'danger',
          centered: true,
          maskClosable: true,
          onOk: async () => {
            await logout();
          },
          // 应用主题样式
          styles: {
            mask: {
              backgroundColor: isDark ? 'rgba(0, 0, 0, 0.7)' : 'rgba(0, 0, 0, 0.45)',
            },
          },
          className: getModalClassName(),
        });
        break;
      default:
        break;
    }
  };



  const handleFullscreen = () => {
    if (!document.fullscreenElement) {
      document.documentElement.requestFullscreen();
    } else {
      document.exitFullscreen();
    }
  };



  return (
    <AntHeader
      style={{
        padding: '0 24px',
        background: `linear-gradient(135deg, ${colorBgContainer} 0%, rgba(248, 250, 252, 0.8) 100%)`,
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
        borderBottom: '1px solid rgba(0, 0, 0, 0.06)',
        backdropFilter: 'blur(10px)',
        boxShadow: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
        position: 'relative',
        zIndex: 10,
        ...style,
      }}
    >
      {/* 左侧：折叠按钮 */}
      <div style={{ display: 'flex', alignItems: 'center' }}>
        <Button
          type="text"
          icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
          onClick={onToggle}
          style={{
            fontSize: '18px',
            width: 48,
            height: 48,
            borderRadius: '12px',
            transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            background: 'rgba(79, 70, 229, 0.05)',
            border: '1px solid rgba(79, 70, 229, 0.1)',
            color: '#4f46e5',
          }}
          onMouseEnter={(e) => {
            e.currentTarget.style.background = 'rgba(79, 70, 229, 0.1)';
            e.currentTarget.style.transform = 'scale(1.05)';
            e.currentTarget.style.boxShadow = '0 4px 12px rgba(79, 70, 229, 0.15)';
          }}
          onMouseLeave={(e) => {
            e.currentTarget.style.background = 'rgba(79, 70, 229, 0.05)';
            e.currentTarget.style.transform = 'scale(1)';
            e.currentTarget.style.boxShadow = 'none';
          }}
        />
      </div>

      {/* 右侧：功能按钮和用户信息 */}
      <div style={{ display: 'flex', alignItems: 'center' }}>
        <Space size="large">
          {/* Dynamic Island 通知系统 */}
          <DynamicIslandNotification onRemoveNotification={removeNotification} />

          {/* 全屏按钮 */}
          <Button
            type="text"
            icon={<FullscreenOutlined />}
            onClick={handleFullscreen}
            style={{
              fontSize: '16px',
              width: 40,
              height: 40,
              borderRadius: '10px',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              transition: 'all 0.3s ease',
              background: 'rgba(0, 0, 0, 0.02)',
            }}
            onMouseEnter={(e) => {
              e.currentTarget.style.background = 'rgba(79, 70, 229, 0.1)';
              e.currentTarget.style.color = '#4f46e5';
              e.currentTarget.style.transform = 'scale(1.05)';
            }}
            onMouseLeave={(e) => {
              e.currentTarget.style.background = 'rgba(0, 0, 0, 0.02)';
              e.currentTarget.style.color = '';
              e.currentTarget.style.transform = 'scale(1)';
            }}
          />

          {/* 主题切换 */}
          <ThemeSelector />

          {/* 用户信息 */}
          <Dropdown
            menu={{
              items: userMenuItems,
              onClick: handleUserMenuClick,
            }}
            trigger={['click']}
            placement="bottomRight"
          >
            <div
              style={{
                cursor: 'pointer',
                display: 'flex',
                alignItems: 'center',
                padding: '8px 16px',
                borderRadius: '12px',
                transition: 'all 0.3s ease',
                background: 'rgba(0, 0, 0, 0.02)',
                border: '1px solid rgba(0, 0, 0, 0.06)',
              }}
              onMouseEnter={(e) => {
                e.currentTarget.style.background = 'rgba(79, 70, 229, 0.05)';
                e.currentTarget.style.borderColor = 'rgba(79, 70, 229, 0.2)';
                e.currentTarget.style.transform = 'translateY(-1px)';
                e.currentTarget.style.boxShadow = '0 4px 12px rgba(0, 0, 0, 0.1)';
              }}
              onMouseLeave={(e) => {
                e.currentTarget.style.background = 'rgba(0, 0, 0, 0.02)';
                e.currentTarget.style.borderColor = 'rgba(0, 0, 0, 0.06)';
                e.currentTarget.style.transform = 'translateY(0)';
                e.currentTarget.style.boxShadow = 'none';
              }}
            >
              <Avatar
                size={32}
                src={state.user?.avatar_url}
                icon={<UserOutlined />}
                style={{
                  marginRight: 12,
                  background: 'linear-gradient(135deg, #4f46e5 0%, #6366f1 100%)',
                  boxShadow: '0 2px 8px rgba(79, 70, 229, 0.3)',
                }}
              />
              <span style={{
                fontWeight: 500,
                color: '#1e293b',
                fontSize: '14px',
              }}>
                {state.user?.full_name || state.user?.username || '用户'}
              </span>
            </div>
          </Dropdown>
        </Space>
      </div>
    </AntHeader>
  );
};

export default Header;
